<template>
	<div>
		<ul>
			<li v-for="m in messages" :key="m.id">
				<!-- 使用to的字符串形式，跳转路由并传参（编码不清晰） -->
				<!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}/${m.time}`">{{m.title}}</router-link> -->
				
				<!-- 使用to的对象形式，跳转路由并传参（编码清晰） -->
				<router-link 
					:to="{
						name:'xiangqing',
						params:{
							id:m.id,
							title:m.title,
							time:m.time
						}
					}"
				>
					{{m.title}}
				</router-link>
			</li>
		</ul>
		<hr>
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name:'Message',
		data() {
			return {
				messages:[
					{id:'001',title:'震惊！两男子竟然做出这种事！',time:'2022-02-15'},
					{id:'002',title:'最新消息！事关你的工资！',time:'2022-02-14'},
					{id:'003',title:'你天天正在吃的食物居然有毒？',time:'2022-02-13'},
				]
			}
		},
	}
</script>